<template>
  <div class="history">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <account-statement-month-item
        v-for="item in bill_history"
        :key="item.bill_monthly"
        :account-item="item"
        @account-month-item="showMonthDetails"
      ></account-statement-month-item>
      <ui-empty :empty="{text:'暂无数据'}" v-if="list.length==0"></ui-empty>
    </ScrollList>
  </div>
</template>

<script>
import AccountStatementMonthItem from "~/components/AccountStatementMonthItem.vue";
import UiEmpty from "~/components/empty";
import ScrollList from "~/components/ScrollList";
import UILoading from "~/components/loading";

export default {
  components: {
    AccountStatementMonthItem,
    ScrollList,
    UiEmpty,
    [UILoading.name]: UILoading
  },
  data: function() {
    return {
      swiper: "",
      page: 1,
      total: 1,
      list: [],
      loading: false,
      config: {
        bottom: false,
        pull: false,
        end: false
      },
      initLoading: true
    };
  },
  computed: {
    bill_history() {
      if (this.list.length > 0) return this.list;
      return this.$store.state.wealthLeShellBill.bill_history.data.list;
    }
  },
  mounted() {
    let that = this;
    (async () => {
      await this.get_bill("bill");
      await this.get_bill("unbill");
    })();
    this.$nextTick(() => {
      this.$refs.scroll.$emit("pulling");
    });
  },
  methods: {
    async get_bill(title) {
      this.initLoading = true;
      let { data: rs } = await this.$axios.post("?ct=api&ac=my_bill", {
        tab: title
      });
      if (rs.code == 0) {
        let guess_params = rs.data.guess_params;
        let dat = guess_params.month;
        let arr = dat.split("-");
        let _month = arr[1];
        if (title == "bill") {
          this.$store.commit("wealthLeShellBill/SET_lastMonth", _month);
          this.$store.commit("wealthLeShellBill/SET_last_year_day", dat);
          this.$store.commit(
            "wealthLeShellBill/SET_bill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_bill_month_tips",
            rs.data.guess_params.text
          );
        } else {
          this.$store.commit("wealthLeShellBill/SET_thisMonth", _month);
          this.$store.commit("wealthLeShellBill/SET_this_year_day", dat);
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_month_tips",
            rs.data.guess_params.text
          );
        }

        // if (!Array.isArray(data) || data.length < 1) {
        //   this.$toast(rs.msg);
        //   return;
        // }

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async getPage(isRefresh) {
      if (this.loading || this.config.end) return false;
      this.loading = true;
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=bill_list", {
          page: this.page
        });
        // return;
        if (rs.code == 0) {
          const { data } = rs;
          this.$store.commit("wealthLeShellBill/set_bill_history", rs);
          this.total = Number(data.total);

          if (isRefresh) {
            this.list = data.list;
          } else {
            this.list = this.list.concat(data.list);
          }
          if (this.total > this.list.length) {
            this.page++;
            this.config.end = false;
          } else {
            this.config.end = true;
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }

      this.loading = false;
    },
    async pull(cb) {
      this.$nuxt.$loading.start();
      this.page = 1;
      this.initLoading = false;
      this.config.end = false;
      // this.getList(this.currency_code);
      this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },

    showMonthDetails(item) {
      this.$store.commit(
        "wealthLeShellBill/SET_bill_month_title",
        item.bill_monthly
      );
      this.$store.commit(
        "wealthLeShellBill/SET_bill_month_tips",
        item.status_str
      );
      this.$store.commit(
        "wealthLeShellBill/SET_amount_currency",
        item.amount_currency
      );
      this.$router.push("/WealthLeShellBillMonthDetails");
    }
  }
};
</script>

<style scoped>
.history {
}
.fixed {
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 999;
  width: 100%;
}
.h428 {
  height: 428px;
}
.swiper-wrapper {
  display: flex;
  transform-style: preserve-3d;
}
</style>
